<template>
    <div class="inspection">
        <div class="head">
            <span class="headtext">检验数据录入</span>
        </div>
        <div class="main">
            <div class="main-info">
                <div class="info-left">
                    <div class="left-item">
                        <span class="item-tip">检验单号：</span>
                        <span class="item-content">20240812</span>
                    </div>
                    <div class="left-item">
                        <span class="item-tip">关联单据：</span>
                        <span class="item-content">采购订单</span>
                    </div>
                    <div class="left-item">
                        <span class="item-tip">物料编号：</span>
                        <span class="item-content">WL00001</span>
                    </div>
                    <div class="left-item">
                        <span class="item-tip">质检员：</span>
                        <span class="item-content">张三</span>
                    </div>
                </div>
                <div class="info-right">
                    <div class="left-item">
                        <span class="item-tip">送检单类型：</span>
                        <span class="item-content">来料检验</span>
                    </div>
                    <div class="left-item">
                        <span class="item-tip">单据编号：</span>
                        <span class="item-content">WL00001</span>
                    </div>
                    <div class="left-item">
                        <span class="item-tip">物料名称：</span>
                        <span class="item-content">密封环Piston ring</span>
                    </div>
                </div>
            </div>
            <div class="main-check">
                <div class="check-input">
                    <span class="tip">检验数量:</span>
                    <el-input v-model.number="inspectionForm.checkNum" @blur="caculateUnqualifiedNum" placeholder="手动输入，整数" size="mini" class="input"></el-input>
                </div>
                <div class="check-input">
                    <span class="tip">合格数量:</span>
                    <el-input v-model.number="inspectionForm.qualifiedNum" @blur="caculateUnqualifiedNum" placeholder="手动输入，整数" size="mini" class="input"></el-input>
                </div>
                <div class="unqualified-number">
                    <span class="tip">不合格数量:{{ inspectionForm.unqualifiedNum }}</span>
                </div>
            </div>
            <div class="result">
                <span class="result-tip" style="font-size: 1.1vw;">检验结果:</span>
                <van-radio-group v-model="inspectionForm.isQualified" direction="horizontal" class="result-radio" style="font-size: 1.1vw;">
                    <van-radio name="1" value="1">合格</van-radio>
                    <van-radio name="0" value="0">不合格</van-radio>
                </van-radio-group>
                <el-button type="primary" size="mini" style="width:6vw;height:4vh;font-size: 0.8vw;text-align: center;line-height: 1vh;" @click="atachmentUpload_btn">附件上传</el-button>
            </div>
            <div class="confirm">
                <el-button type="primary" size="mini" style="width:8vw;height: 6vh;text-align: center;line-height: 1vh;" @click="confirm_btn">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            inspectionForm:{
                checkNum:'',
                qualifiedNum:'',
                isQualified:'',
                unqualifiedNum:'自动计算',  //不合格数量
            }
        }
    },
    mounted(){},
    watch:{
        /*
        'inspectionForm.checkNum':function (newVal) {
            if(this.inspectionForm.checkNum > 0 && this.inspectionForm.qualifiedNum >= 0){
                let count = this.inspectionForm.checkNum - this.inspectionForm.qualifiedNum;
                this.inspectionForm.unqualifiedNum = count > 0 ? count : '数据输入有误';
            }
        },
        'inspectionForm.qualifiedNum':function (newVal) {
            if(this.inspectionForm.checkNum > 0 && this.inspectionForm.qualifiedNum >= 0){
                let count = this.inspectionForm.checkNum - this.inspectionForm.qualifiedNum;
                this.inspectionForm.unqualifiedNum = count > 0 ? count : '数据输入有误';
            }
        }
        */
    },
    methods: {
        //计算不合格数量
        caculateUnqualifiedNum(){
            let checkNum =  this.inspectionForm.checkNum;
            let qualifiedNum = this.inspectionForm.qualifiedNum;
            if(checkNum === '' || qualifiedNum === '') return;
            if(!(checkNum > 0 && qualifiedNum >= 0)) {
                this.$message({message:'输入数据有误!',type:'warning'});
                this.inspectionForm.unqualifiedNum = "数据输入有误!";
                return;
            }
            this.inspectionForm.unqualifiedNum = (checkNum - qualifiedNum) >= 0 ? (checkNum - qualifiedNum) : '输入数据有误!';
        },
        //附件上传
        atachmentUpload_btn(){},
        //确定按钮
        confirm_btn(){}
    },
}
</script>

<style lang="scss" scoped>
.inspection {
    width: 100vw;
    height: 100vh;
    .head{
        width: 100%;
        height: 8vh;
        background-color: #5b9fea;
        color: #fff;
        text-align: center;
        line-height: 8vh;
        font-size: 2vw;
    }
    .main{
        width: 100%;
        height: calc(100vh - 75px);
        padding: 10px 20px;
        display: flex;
        flex-direction: column;
        .main-info{
            flex: 2;
            width: 100%;
            height: 160px;
            display: flex;
            justify-content: space-around;
            font-size: 1.2vw;
            .info-left{
                .left-item{
                    margin: 10px 0;
                }
            }
            .info-right{
                .left-item{
                    margin: 10px 0;
                }
            }
            .item-tip{
                display: inline-block;
                width: 8vw;
                text-align: right;
            }
        }
        .main-check{
            flex: 1;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .check-input{
                width: 18vw;
                display: flex;
                align-items: center;
                .tip{
                    width: 8vw;
                    font-size: 1.1vw;
                    font-weight: bold;
                }
                .input{
                    width: 200px;
                }
            }
            .unqualified-number{
                width: 12vw;
                .tip{
                    font-size: 1.1vw;
                    font-weight: bold;
                }
            }
        }
        .result{
            flex: 1;
            margin: 0 8vw;
            display: flex;
            align-items: center;
            .result-radio{
                margin: 0 40px 0 10px;
            }
        }
        .confirm{
            flex:2;
            display: flex;
            justify-content: center;
        }
    }
}
</style>